<!-- 我的-订单-评价 -->
<script setup>
import { reactive, ref, nextTick } from 'vue'
import { onLoad, onShow, onPageScroll, onReachBottom } from '@dcloudio/uni-app'
// 全局页面数据
const data = reactive({
  barHeight: 0,
  navHeight: 0,
  remark: '',
  fileList: [],
  value: null,
  checked: false
})
onLoad(() => {
  //获取手机系统的信息（在这主要是获取状态栏和胶囊的高度）
  let { statusBarHeight } = uni.getSystemInfoSync()
  data.barHeight = statusBarHeight
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  data.navHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2
  // this.getList()
})
// 上传图片
const uploadFilePromise = (url) => {
  return new Promise((resolve, reject) => {
    let a = uni.uploadFile({
      url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
      filePath: url,
      name: 'file',
      formData: {
        user: 'test',
      },
      success: (res) => {
        setTimeout(() => {
          resolve(res.data.data);
        }, 1000);
      },
    });
  });
};
// 新增图片
const afterRead = async (event) => {
  // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
  let lists = [].concat(event.file);
  let fileListLen = data.fileList.length;
  lists.map((item) => {
    data.fileList.push({
      ...item,
      status: 'success',
      message: '',
    });
  });
}
// 删除图片
const deletePic = (event) => {
  data.fileList.splice(event.index, 1);
};

</script>

<template>
  <view class="order-evaluate-page">
    <!-- 背景图片 -->
    <image src="/static/images/my/head_bg.png" style="width: 100vw;height: 626rpx;" mode="widthFix" class="bg-img">
    </image>
    <!-- 头部内容 -->
    <view class="head-box" :style="{ 'padding-top': data.barHeight + 'px' }">
      <!-- navbar -->
      <view class="navbar" :style="{ 'height': data.navHeight + 'px' }">
        <view class="back-box">
          <up-icon name="arrow-left" color="#303133" size="20"></up-icon>
        </view>
        <text>订单评价</text>
      </view>
    </view>
    <!-- 内容区域 -->
    <view class="content-box">
      <!-- 场馆评价内容 -->
      <view class="venue-evaluate-box">
        <view class="title">
          场馆评价
        </view>
        <view class="info-box">
          <view class="left">
            <image style="width: 132rpx;height: 132rpx;"
              src="https://image.nanjingtouyang.com/touy_sc/2023/07/2023072111065295373.jpeg" mode="aspectFill">
            </image>
          </view>
          <view class="right">
            <view class="title">Oxygen Tank</view>
            <view class="class-name">运动室</view>
            <view class="time">2023-07-21 10:06</view>
          </view>
        </view>
        <view class="evaluate-box">
          <!-- 评价内容 -->
          <up-textarea v-model="data.remark" height="128rpx" border="none" placeholder="说点什么吧～" :count="false"
            maxlength="300"></up-textarea>
          <!-- 上传图片 -->
          <up-upload :fileList="data.fileList" @delete="deletePic" @afterRead="afterRead" name="1"
            :previewFullImage="true" multiple :maxCount="3" uploadIcon="camera" uploadIconColor="#CCCCCC" width="120rpx"
            height="120rpx">
            <view class="upload-btn">
              <up-icon name="camera" color="#CCCCCC" size="64rpx"></up-icon>
              <view class="txt">+上传图片</view>
            </view>
          </up-upload>
          <!-- 字数统计 -->
          <view class="word-count">{{ data.remark.length }}/300</view>
        </view>
        <!-- 评分 -->
        <view class="score-box">
          <text class="label">满意程度</text>
          <up-rate v-model="data.value" size="28" inactiveIcon="star-fill" inactiveColor="#D9D9D9"
            activeColor="#FFB13B"></up-rate>
        </view>
      </view>
      <!-- 教练评价内容 -->
      <view class="coach-evaluate-box">
        <view class="title">
          教练评价
        </view>
        <view class="info-box">
          <view class="left">
            <image style="width: 132rpx;height: 132rpx;"
              src="https://image.nanjingtouyang.com/touy_sc/2023/07/2023072111065295373.jpeg" mode="aspectFill">
            </image>
          </view>
          <view class="right">
            <view class="title">张晓婷</view>
            <view class="tag">运动陪练</view>
            <view class="time">下单时间:2023-07-21 10:06</view>
          </view>
        </view>
        <view class="evaluate-box">
          <!-- 评价内容 -->
          <up-textarea v-model="data.remark" height="128rpx" border="none" placeholder="说点什么吧～" :count="false"
            maxlength="300"></up-textarea>
          <!-- 上传图片 -->
          <up-upload :fileList="data.fileList" @delete="deletePic" @afterRead="afterRead" name="1"
            :previewFullImage="true" multiple :maxCount="3" uploadIcon="camera" uploadIconColor="#CCCCCC" width="120rpx"
            height="120rpx">
            <view class="upload-btn">
              <up-icon name="camera" color="#CCCCCC" size="64rpx"></up-icon>
              <view class="txt">+上传图片</view>
            </view>
          </up-upload>
          <!-- 字数统计 -->
          <view class="word-count">{{ data.remark.length }}/300</view>
        </view>
        <!-- 评分 -->
        <view class="score-box">
          <text class="label">满意程度</text>
          <up-rate v-model="data.value" size="28" inactiveIcon="star-fill" inactiveColor="#D9D9D9"
            activeColor="#FFB13B"></up-rate>
        </view>
      </view>
    </view>
    <!-- 按钮 -->
    <view class="btns-box">
      <view class="anonymous-box">
        <u-checkbox v-model:checked="data.checked" usedAlone activeColor="#25D62E" shape="circle" label="" />
        <text>匿名评价</text>
      </view>
      <view class="btn">
        <text>提交</text>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.order-evaluate-page {
  padding-bottom: 216rpx;
  min-height: 100vh;
  background: #F6F6F6;

  // 背景图片
  & .bg-img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }

  // 头部内容
  & .head-box {
    position: relative;
    z-index: 2;

    & .navbar {
      display: flex;
      align-items: center;
      justify-content: center;

      & .back-box {
        position: absolute;
        left: 24rpx;
      }
    }
  }

  // 内容区域
  & .content-box {
    position: relative;
    z-index: 1;
    margin-top: 24rpx;
    padding: 0 32rpx;

    // 场馆评价内容
    & .venue-evaluate-box {
      padding: 32rpx;
      background: #FFFFFF;
      border-radius: 24rpx;

      & .title {
        font-weight: 500;
        font-size: 32rpx;
        color: #303133;
      }

      & .info-box {
        margin-top: 24rpx;
        display: flex;
        align-items: center;

        & .left {
          border-radius: 24rpx;
          font-size: 0;
          overflow: hidden;
        }

        & .right {
          margin-left: 16rpx;

          & .title {
            font-weight: 500;
            font-size: 32rpx;
            color: #303133;
          }

          & .class-name {
            margin-top: 16rpx;
            font-weight: 400;
            font-size: 24rpx;
            color: #B7B7B7;
          }

          & .time {
            margin-top: 4rpx;
            font-weight: 400;
            font-size: 24rpx;
            color: #B7B7B7;
          }
        }
      }

      & .evaluate-box {
        position: relative;
        margin-top: 32rpx;
        padding: 32rpx;
        background: #F6F6F6;
        border-radius: 12rpx;

        &::v-deep .u-textarea {
          padding: 0;
          background-color: transparent;
        }

        & .upload-btn {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          width: 120rpx;
          height: 120rpx;
          border: 2rpx dashed #CCCCCC;
          border-radius: 12rpx;

          & .u-icon {
            margin-bottom: 14rpx;
          }

          & .txt {
            font-weight: 400;
            font-size: 20rpx;
            color: #B7B7B7;
          }
        }

        & .word-count {
          position: absolute;
          bottom: 24rpx;
          right: 24rpx;
          font-weight: 400;
          font-size: 24rpx;
          color: #B7B7B7;
        }
      }

      & .score-box {
        display: flex;
        align-items: center;
        margin-top: 24rpx;

        & .label {
          padding-right: 16rpx;
          font-weight: 400;
          font-size: 28rpx;
          color: #B7B7B7;
        }
      }
    }

    // 教练评价内容
    & .coach-evaluate-box {
      margin-top: 20rpx;
      padding: 32rpx;
      background: #FFFFFF;
      border-radius: 24rpx;

      & .title {
        font-weight: 500;
        font-size: 32rpx;
        color: #303133;
      }

      & .info-box {
        margin-top: 24rpx;
        display: flex;
        align-items: center;

        & .left {
          border-radius: 24rpx;
          font-size: 0;
          overflow: hidden;
        }

        & .right {
          margin-left: 16rpx;

          & .title {
            font-weight: 500;
            font-size: 32rpx;
            color: #303133;
          }

          & .tag {
            margin-top: 16rpx;
            font-weight: 400;
            font-size: 24rpx;
            color: #B7B7B7;
          }

          & .time {
            margin-top: 4rpx;
            font-weight: 400;
            font-size: 24rpx;
            color: #B7B7B7;
          }
        }
      }

      & .evaluate-box {
        position: relative;
        margin-top: 32rpx;
        padding: 32rpx;
        background: #F6F6F6;
        border-radius: 12rpx;

        &::v-deep .u-textarea {
          padding: 0;
          background-color: transparent;
        }

        & .upload-btn {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          width: 120rpx;
          height: 120rpx;
          border: 2rpx dashed #CCCCCC;
          border-radius: 12rpx;

          & .u-icon {
            margin-bottom: 14rpx;
          }

          & .txt {
            font-weight: 400;
            font-size: 20rpx;
            color: #B7B7B7;
          }
        }

        & .word-count {
          position: absolute;
          bottom: 24rpx;
          right: 24rpx;
          font-weight: 400;
          font-size: 24rpx;
          color: #B7B7B7;
        }
      }

      & .score-box {
        display: flex;
        align-items: center;
        margin-top: 24rpx;

        & .label {
          padding-right: 16rpx;
          font-weight: 400;
          font-size: 28rpx;
          color: #B7B7B7;
        }
      }
    }
  }

  // 按钮
  & .btns-box {
    position: fixed;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    bottom: 0;
    left: 0;
    z-index: 9;
    padding: 0 36rpx;
    padding-top: 12rpx;
    width: 100vw;
    height: 172rpx;
    background: #FFFFFF;
    border: 1rpx solid #E9E9EB;

    & .anonymous-box {
      display: flex;
      align-items: center;
      margin-top: 12rpx;

      & text {
        font-weight: 500;
        font-size: 28rpx;
        color: #303133;
      }
    }

    & .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 88rpx;
      width: 428rpx;
      color: #FFFFFF;
      background: #303133;
      font-weight: 500;
      font-size: 32rpx;
      line-height: 38rpx;
      text-align: center;
      border-radius: 112rpx;

    }
  }
}
</style>